<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小蛾的感谢信-投票页</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/cypager.min.css" />
		<link rel="stylesheet" href="css/myPagination1.css" type="text/css">
		<link rel="stylesheet" href="css/index.css">
		<style>
			#pagination{
				background: #E5E5E5;
				padding-left: 23vw;
				padding-bottom: 10vw;
			}
			.pagination li.active {
				background: #cc666c;
				color: white;
				cursor: not-allowed;
			}
			.pagination ul li {
				padding: 0 1vw;
				vertical-align: top;
				display: inline-block;
				font-size: 1vw;
				min-width: 4vw;
				min-height: 2vw;
				line-height: 5vw;
				cursor: pointer;
				box-sizing: border-box;
				text-align: center;
				background-color: #ffffff;
				color: #606266;
				border-radius: 1vw;
				margin: 0 1px;
				border: 1px solid #ebebeb;
				height: 5vw;
				width: 8vw;
				white-space:nowrap;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<img src="img/bg1.jpg" />
			<div>
				<div class="vote"><a href="/index">投票专区</a></div>
				<div class="rank"><a href="second">最热排行</a></div>
			</div>
		</div>
		<div class="main" id="content">
		</div>
		<div id="pagination" class="pagination"></div>
		<div class="am-cf">
			<div class="am-fr">
				<ul id="page" class="am-pagination tpl-pagination">
				</ul>
			</div>
		</div>

		<div class="bottom">
			<p>活动详情</p>
			<p>投票规则：活动采用匿名投票方式，每人限投一票。</p>
			<p>奖项设置：</p>
			<p>第一名：xxx*1<br>第二名：xxx<br>第三名：xxx<br>幸运奖：xxx</p>
			<p>投票时间：2019.7.25-7.30</p>
		</div>
		<div id="win">
			<div>
				<p>活动期间每人只能投一次票！</p>
				<p>请慎重选择！</p>
				<form>
					画吧ID:<br> <input type="text" name="username" class="input1"><br>
					邮箱: <br><input type="text" name="email" class="input1" id="txt1"><br>
					验证码：<br>
					<div style="display: flex;"><input type="code" name="key" class="input2"><button id="btn">获取验证码</button></div>
					<input type="button" value=" 就投她了" class="input3" onclick="voteHer()">
					<div id="input4" style="text-align: center" onclick="closeWin()">我再想想</div>
				</form>
			</div>
		</div>
		<div id="ok" class="alert">
			<p>投票成功！</p>
			<div onclick="closeOk()">
				<p>确定 </p>
			</div>
		</div>

		<div id="full" class="alert">
			<p>请勿重复投票</p>
			<div onclick="closeFull()">
				<p>确定 </p>
			</div>
		</div>
		<div id="no" class="alert">
			<p>投票失败</p>
			<div onclick="closeNo()">
				<p>确定 </p>
			</div>
		</div>
		<script type="text/javascript" src="js/cypager.min.js"></script>
		<script>
            var win = document.getElementById("win");
            var ok = document.getElementById("ok");
            var no = document.getElementById("no");
            var full = document.getElementById("full");

			$(function() {
				$("#pagerArea").cypager({
					pg_size: 10,
					pg_nav_count: 4,
					pg_total_count: 194,
					pg_call_fun: function(count) {
						alert(count)
					}
				});
			});

		</script>
		<script>
			var okk = 0;
			var email = 0;

			function voteHer() {
                $.ajax({
                    type:"POST",
                    dataType:"json",
                    url:"/VoteUserController",
                    success : function(data){
                        if (data == 1) {
                            ok.style.display = "inline";
                        }else {
                            no.style.display = "inline";
                        }
                    },
                    error:function () {
                        no.style.display = "inline";
                    }
                });
			}

			function closeWin() {
				win.style.display = "none";
			}

			function closeFull() {
				full.style.display = "none";
				win.style.display = "none";
			}

			function closeOk() {
				ok.style.display = "none";
				win.style.display = "none";
			}

			function closeNo() {
				no.style.display = "none";
				win.style.display = "none";
			}

			//倒计时60s
			var wait=60;
			function time(o) {
				if (wait == 0) {
					o.removeAttribute("disabled");
					o.innerHTML="获取验证码";
					wait = 60;
				} else {
					o.setAttribute("disabled", true);
					o.innerHTML="重发(" + wait + ")";
					wait--;
					setTimeout(function() {
								time(o)
							},
							1000)
				}
			}
			document.getElementById("btn").onclick=function(){
                var oTxt=document.getElementById("txt1");
                var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;/*邮箱不区分大小写*/
                if (re.test(oTxt.value))
                {
                    time(this);
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/VoteUserController",
                    	success:function () {
							
                        }
					});
                }
                else
                {
                    alert("输入的邮箱有误，请重新输入");
                }
			}

		</script>

		<script src="js/myPagination1.js"></script>
		<script type="text/javascript">
            function Show(id) {
                console.log(id)
                win.style.display ="inline";
            }
			$(document).ready(function(){
				var curr = 0;
				$.ajax({
					type:"POST",
					dataType:"json",
					url:"/pictureInformation"+curr,
					success : function(data){

						var str = '';
						for (var i = 0; i < data.length; i++) {
							str+="<div class='paint'>"+
									"<img src='img/"+data[i].pictureurl+" '>"+
									"<div class='num'>"+
									"<p>❤"+data[i].votenumber+"票</p>"+
							         "</div>"+
							         "<div class='span' onclick='Show(id)'>"+
									"<a>投票</a> </div> </div>"
						}
						//把数据插入到ul中
						$("#content").html(str);
					}
				});
				$.ajax({
					url : "/pictureCount",
					type : "post",
					dataType : "json",
					success : function(data){
						var ListNum=data;
						var pageNum=Math.ceil(ListNum/6);
						//调用分页
						new Page({
							id: 'pagination',
							pageTotal: pageNum, //总页数
							pageAmount: 8, //每页多少条
							dataTotal: ListNum, //总共多少条数据
							curPage:1, //初始页码,不填默认为1
							pageSize: 3, //分页个数,不填默认为5
							showPageTotalFlag: false, //是否显示数据统计,不填默认不显示
							showSkipInputFlag: false, //是否支持跳转,不填默认不显示
							getPage: function(page) {
								//获取当前页数
								console.log(page);
								var Pagecurr = page-1;
								$.ajax({
									type:"POST",
									dataType:"json",
									url:"/pictureInformation"+Pagecurr,
									success : function(data){
										var str = '';
										for (var i = 0; i < data.length; i++) {
											str+="<div class='paint'>"+
													"<img src='img/"+data[i].pictureurl+" '>"+
													"<div class='num'>"+
													"<p>❤"+data[i].votenumber+"票</p>"+
													"</div>"+
													"<div class='span' onclick='alert(1)'>"+
													"<a>投票</a> </div> </div>"
										}
										//把数据插入到ul中
										$("#content").html(str);

									}

								});


							}


						});
					}
				});


			});

            document.getElementById("input4").onclick=function(){
                win.style.display ="none";
            }

		</script>

	</body>
</html>
